<template>
    <view class="wrap">
        <!-- 用户信息 -->
        <view class="user-info flex">
            <view class="avatar"><image :src="vuex_avatarUrl" class="userAvatar"></image></view>
            <view class="infos flex-column flex-h-center">
                <view class="bold nick-name ">{{ vuex_nickName }}</view>
                <Authorize @authorizeSuccess="editSignature">
                    <view class="flex flex-v-center edit-info" @click="editSignature">
                        <view class="edit-info-tip">{{ vuex_userSignature || '说点什么吧' }}</view>
                        <image src="../../../static/tabBar/mine/edit-icon.png" class="userAvatar"></image>
                    </view>
                </Authorize>
            </view>
        </view>
        <!-- 卡券 积分 足迹 -->
        <view class="flex-h-around user-info-list">
            <view class="item">
                <view class="number">{{ integralCount }}</view>
                <view class="type">积分</view>
            </view>
            <view class="item">
                <view class="number">{{ couponCount }}</view>
                <view class="type">卡券</view>
            </view>

            <Authorize @authorizeSuccess="gotoFootprint">
                <view class="item" @click="gotoFootprint">
                    <view class="number">{{ footprintCount }}</view>
                    <view class="type">足迹</view>
                </view>
            </Authorize>
        </view>
        <!-- 页面模块 -->
        <view class="pages-list flex-h-between">
            <!-- 云游相册 -->
            <Authorize @authorizeSuccess="gotoAlbum">
                <view class="album" @click="gotoAlbum">
                    <image class="icon" src="../../../static/tabBar/mine/album.png" mode=""></image>
                    <view class="page-name flex flex-column ">
                        <view class="">云游相册</view>
                        <view class="sub-name">Reoyoo</view>
                    </view>
                </view>
            </Authorize>
            <!-- 待购买照片 上传照片 -->
            <view class="flex-column flex-h-between">
                <Authorize @authorizeSuccess="gotoTobePaid"><PageItem icon="tobePaid" pageName="待购买照片" @pageClick="gotoTobePaid"></PageItem></Authorize>
                <Authorize @authorizeSuccess="uploadPhotos"><PageItem icon="upload" pageName="上传照片" @pageClick="uploadPhotos"></PageItem></Authorize>
            </view>
        </view>
        <!-- 制作H5  Vlog制作-->
        <view class="pages-list pages-list1 flex-h-between">
            <Authorize @authorizeSuccess="makeH5" ><MakeItem icon="h5" pageName="创作H5" @pageClick="makeH5"></MakeItem></Authorize>
            <Authorize @authorizeSuccess="makeVlog"><MakeItem icon="vlog" pageName="Vlog制作" @pageClick="makeVlog"></MakeItem></Authorize>
        </view>
        <!--乐拍卡  兼职摄影  云游客服 关于云游-->
        <view class="pages-list pages-list2 flex-wrap flex-h-between">
            <PageItem class="page-item" icon="icon0" pageName="乐拍卡" @pageClick="gotoCardIntroduce"></PageItem>
            <Authorize @authorizeSuccess="gotoPhotography"><PageItem class="page-item" icon="icon1" pageName="兼职摄影" @pageClick="gotoPhotography"></PageItem></Authorize>
            <PageItem class="page-item" icon="icon2" pageName="云游客服"><button open-type="contact" class="call-btn"></button></PageItem>
            <PageItem class="page-item" icon="icon3" pageName="关于云游" @pageClick="gotoAboutUs"></PageItem>
        </view>
    </view>
</template>

<script>
import Authorize from '@/components/Authorize/Authorize.vue';
import { getUserInfo, getCode } from '@/api/mine.js';
import { getNobuyData } from '@/api/photos.js';
import PageItem from './components/PageItem.vue';
import MakeItem from './components/MakeItem.vue';
import { uploadFile } from '@/common/utils.js';
export default {
    data() {
        return {
            // 积分
            integralCount: 0,
            // 卡券
            couponCount: 0,
            // 足迹
            footprintCount: 0,
            // 待上传照片数量
            tobeUploadAmount: 0,
            // 上传成功照片数量
            uploadSuccessAmount: 0,
            // 上传失败照片数量
            uploadErrorAmount: 0,
            // 
            hadGetUserInfo:false,
            addClick:false
        };
    },
    computed: {},
    onShow() {
        this.$storage.getStorage(this.$config.tokenKey) && this.getUserInfo();
    },
    methods: {
        // 获取用户信息
        async getUserInfo() {
            this.hadGetUserInfo=true;
            let userInfo = await getUserInfo();
            this.integralCount = userInfo.integral_count;
            this.couponCount = userInfo.coupon_count;
            this.footprintCount = userInfo.footmark_count;
            this.$u.vuex('vuex_userSignature', userInfo.profile || '');
        },
        // 再次获取用户信息
        getInfoAgain(){
            if(!this.hadGetUserInfo){
                this.getUserInfo();
            }
        },
        // 编辑签名
        editSignature() {
            this.getInfoAgain();
            this.$u.route('/pages/minePages/signature/signature');
        },
        // 足迹
        gotoFootprint() {
            // this.getInfoAgain();
            // this.$u.route('/pages/minePages/footprint/footprint');
        },
        // 相册
        gotoAlbum() {
            this.getInfoAgain();
            this.$u.route('/pages/minePages/cloudAlbum/cloudAlbum');
        },
        // 待购买
        async gotoTobePaid() {
            this.$u.route('/pages/minePages/tobePaidList/tobePaidList');
            this.getInfoAgain();
        },
        // 上传照片  上传成功之后 进入到我的相册页面
        async uploadPhotos() {
            let photos = await this.$uniPromise.chooseImage();
            if (photos && photos.tempFilePaths.length > 0) {
                this.tobeUploadAmount = photos.tempFilePaths.length;
                this.startUpload(photos.tempFilePaths);
            }
            this.getInfoAgain();
        },
        // 开始上传照片
        startUpload(list) {
            list.forEach((item, index) => {
                uploadFile(`${this.$config.baseUrl}/api/upload/obs`, item, this.$config.tokenKey)
                    .then(res => {
                        if (res.RequestStatus === 100 && res.Data && res.Data.image_url) {
                            this.uploadSuccessAmount += 1;
                        } else {
                            this.uploadErrorAmount += 1;
                        }
                        this.checkUploadEnd();
                    })
                    .catch(err => {
                        this.uploadErrorAmount += 1;
                        this.checkUploadEnd();
                    });
            });
        },
        //判断是否全部上传完成
        checkUploadEnd() {
            if (this.uploadSuccessAmount + this.uploadErrorAmount >= this.tobeUploadAmount) {
                this.$showToast(`上传成功${this.uploadSuccessAmount}张,上传失败${this.uploadErrorAmount}张`);
                this.uploadSuccessAmount = this.uploadErrorAmount = this.tobeUploadAmount = 0;
                setTimeout(() => {
                    this.$u.route('/pages/minePages/cloudAlbum/cloudAlbum');
                }, 1500);
            }
        },
        // 制作H5
        makeH5() {
            this.$u.route('/pages/compoundPages/selectTemplate/selectTemplate');
        },
        // 制作vlog  给提示 暂时不做
        makeVlog() {
            this.$showToast('正在努力制作ing，请期待~')
        },
        // 乐拍卡
        gotoCardIntroduce() {
            this.$u.route('/pages/lepai/lepaiCard/lepaiCard');
        },
        // 兼职摄影师
        async gotoPhotography() {
            let password = this.$storage.getStorage('password');
            if (password) {
                this.$u.route('/pages/minePages/upload/upload');
            } else {
                // let code = await getCode();
                // if (code.RequestStatus == 100 && code.Msg) {
                //     this.$storage.setStorage('password', code.Msg);
                //     this.$u.route('/pages/minePages/upload/upload');
                // } else {
                    
                // }
                this.$u.route('/pages/minePages/password/password');
            }
            this.getInfoAgain();
        },
        // 关于云游
        gotoAboutUs() {
            this.$u.route('/pages/minePages/aboutUs/aboutUs');
        }
    },
    components: {
        Authorize,
        PageItem,
        MakeItem
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    background: #f7f7f7;
    .user-info {
        padding: 15rpx 30rpx 0;
        .avatar {
            width: 110rpx;
            height: 110rpx;
            background-color: #f6f8fc;
            border: solid 2rpx #ffffff;
            border-radius: 100%;
            image {
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
        }
        .infos {
            padding-left: 28rpx;
            .nick-name {
                font-size: 34rpx;
                padding-bottom: 16rpx;
            }
            .edit-info {
                font-size: 26rpx;
                .edit-info-tip {
                    color: #abb3b8;
                    padding-right: 14rpx;
                }
                image {
                    width: 26rpx;
                    height: 26rpx;
                }
            }
        }
    }
    .user-info-list {
        padding: 50rpx 0;
        .item {
            font-size: 36rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .number {
                font-weight: bold;
            }
            .type {
                color: #999999;
                font-size: 28rpx;
                padding-top: 8rpx;
            }
        }
    }
    .pages-list {
        padding: 0 30rpx;
        .album {
            position: relative;
            width: 336rpx;
            height: 300rpx;
            background-image: linear-gradient(45deg, #5ed778 0%, #23bf98 100%);
            box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(71, 206, 132, 0.5);
            border-radius: 10rpx;
            .icon {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 226rpx;
                height: 194rpx;
            }
            .page-name {
                position: absolute;
                left: 150rpx;
                top: 26rpx;
                display: flex;
                font-size: 38rpx;
                line-height: 38rpx;
                view {
                    color: #ffffff;
                }
                .sub-name {
                    font-size: 30rpx;
                    line-height: 30rpx;
                    padding-top: 14rpx;
                }
            }
        }
    }
    .pages-list1 {
        margin-top: 30rpx;
    }
    .pages-list2 {
        margin-top: 30rpx;
        .page-item {
            margin-bottom: 18rpx;
            .call-btn {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            .call-btn {
                background: rgba(0, 0, 0, 0);
            }
            .call-btn:after {
                border: 0;
            }
        }
    }
}
</style>
